<template>
  <view class="rangeDate">
    <div class="rangeDate_start" @click="openStart">{{ startValue||'开始时间' }}</div>
    <div class="rangeDate_mid">{{item.betweenText||'-'}}</div>
    <div class="rangeDate_end" @click="openEnd">{{ endValue||'结束时间' }}</div>
    <datetimePicker
        @change='startChange'
        ref="startRef"
        :disabled="item.disabled"
        :type="item.timeType||'hour-minute'"
        :item="item"
        :startYear="item.startYear||2000"
        :endYear="item.endYear||2050"
        :datestring="startValue"
        :isAll="true"
        :current="false"
        :placeholder="item.startPlaceholder||'开始时间'"
    />
    <datetimePicker
        @change='endChange'
        ref="endRef"
        :disabled="item.disabled"
        :type="item.timeType||'hour-minute'"
        :item="item"
        :startYear="item.startYear||2000"
        :endYear="item.endYear||2050"
        :datestring="endValue"
        :isAll="true"
        :current="false"
        :placeholder="item.startPlaceholder||'开始时间'"
    />
  </view>
</template>
<script>
import {backType} from "./util";
import datetimePicker from 'uni_modules/zhaoxin-formList/components/zhaoxin-formList/bory-dateTimePicker'
import {diffNowTime} from './tools'

export default {
  name:'rangeDate',
  components:{
    datetimePicker
  },
  props: {
    // item
    item:{
      default:()=>{
        return {}
      }
    },
    // 值
    value:{
      type:[String,Array],
      default:()=>{
        return ''
      }
    },
  },
  data() {
    return {
      defaultYear:new Date(),
      show:false,
      inList:[],
      startValue:'',
      endValue:'',
      checkEnd:[],
      max:1,
    };
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  computed:{

  },
  mounted() {
  },
  methods: {
    openStart(){
      if (!this.item.disabled) {
        this.$refs.startRef.show();
      }
    },
    startChange(val){
      if ((this.endValue&&diffNowTime(val,this.endValue,this.item.timeType)||!this.endValue)) {
        this.startValue=val
      }else{
        uni.showToast({title:'开始时间需要大于结束时间',icon:'none'})
      }
      this.upDate()
    },
    openEnd(){
      if (!this.item.disabled) {
        this.$refs.endRef.show();
      }
    },
    endChange(val){
      if ((this.startValue&&diffNowTime(this.startValue,val,this.item.timeType)||!this.startValue)) {
        this.endValue=val
      }else{
        uni.showToast({title:'开始时间需要大于结束时间',icon:'none'})
      }
      this.upDate()
    },
    upDate(){
      if (this.startValue&&this.endValue) {
        this.$emit('change',{...this.item,value:[this.startValue,this.endValue]})
      }
    }
  },
  watch:{
    // 设置值
    value:{
      handler(val,oldVal) {
        if (val!==oldVal&&val) {
          if (backType(val,'String')) {
            let arr=val.split(',')||[]
            if (arr.length>0) {
              this.startValue=arr[0]
              this.endValue=arr[1]||''
            }
          }else{
            this.startValue=val[0]
            this.endValue=val[1]||''
          }
          this.upDate()
        }
      },
      immediate: true,
      deep: true
    },
  },

};
</script>
<style lang="scss" scoped>
.rangeDate{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .rangeDate_start,.rangeDate_end{
    flex-shrink: 1;
    width: 100%;
    font-size: 28rpx;
    text-align: center;
  }
  .rangeDate_end{
    text-indent: 1em;
  }
  .rangeDate_mid{
    flex-shrink: 0;
  }
}

</style>
